<template>
  <div class="productAndPrice-detail-view">

    <item-title title="基本信息" />

    <el-form
      :inline="true"
      label-position="right"
      label-width="130px"
    >
      <el-row v-if="datas.agentType == 'agent'">
        <el-col :span="12">
          <el-form-item label="代理商名称:">
            {{ datas.agentName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="统一社会信用代码:">
            {{ datas.creditCode }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-else>
        <el-col :span="12">
          <el-form-item label="兼职名称:">
            {{ datas.userName }}
          </el-form-item>
        </el-col>
        <!--        <el-col :span="12">-->
        <!--          <el-form-item label="联系电话:">-->
        <!--            {{ datas.tel }}-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->

      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="产品通用名:">
            {{ datas.productPopularName }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="商品名:">
            {{ datas.productName }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="包装规格:">
            {{ datas.packSpecs }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item :label="datas.agentType == 'agent' ? '代理属性:' : '兼职属性:'">
            {{ getLabel(datas.agentType , datas.agentAttribute) }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="代理地区:">
            <area-list-view :areas="datas.region" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="可营销终端:">
            {{ getLabel('app_mode',datas.terminalType) }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="交易价:">
            <div style="display: flex;align-items: center">
              <span>{{ datas.tradePrice }}元/{{ getLabel('sell_unit',datas.sellUnit) }}</span>
            </div>

          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item :label="datas.agentType == 'agent' ? '代理期限至:' : '兼职期限至:'">
            {{ dateFormat('yyyy-mm-dd',datas.agentEndTime) }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="最低销量:">
            <div v-if="datas.minSale">
              {{ datas.minSale }}{{ getLabel('sell_unit',datas.sellUnit) }}/{{ getLabel('sell_num_unit',datas.minSaleUnit) }}
            </div>
            <div v-else>未设置</div>

          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="销量保证金:">

            <div v-if="datas.minSalePromise">
              {{ datas.minSalePromise }}元
            </div>
            <div v-else>未设置</div>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="负责营销职员:">
            {{ datas.headName }}
          </el-form-item>
        </el-col>

        <el-col :span="12" v-if="booleAgent">
          <el-form-item label="代理服务摘要名称:">
            {{ datas.abstract }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="创建人:">
            {{ datas.creatorName }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="创建时间:">
            {{ dateFormat('yyyy-mm-dd HH:MM',datas.createdAt) }}
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>

        <el-col :span="24">
          <el-form-item label="其他约定:">
            {{ datas.remark }}
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>

    <item-title title="修改记录" />

    <operation-view
      :id="id"
      mode="agent_product"
    />

    <detail-drawer
      ref="detailDrawer"
      custom-title
      :size-width="1000"
    >
      <template #title>

        <span>合同 </span>
        <span class="drawerTitle">{{ datas.contractName }}</span>

      </template>
      <template #contents>

        <contract-detail
          ref="salesDetailDrawer"
          :contract-id="datas.contractId"
        />

      </template>
    </detail-drawer>

  </div>

</template>

<script>
import contractDetail from '../../contract/contractDetail'
import {defineComponent, getCurrentInstance, inject, onMounted, reactive, toRefs,} from 'vue'

export default defineComponent({
  name: 'ProductAndPriceInfoView',
  components: { contractDetail },
  props: {
    id: {
      type: Number,
      default: 0,
    },
    booleAgent:{
      type: Boolean,
      default:true
    }
  },
  setup(props, { emit }) {
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    var data = reactive({
      datas: {},
      detailDrawer: null,
    })

    const contractClick = () => {
      data.detailDrawer.open()
    }

    onMounted(() => {
      api.signedAgent.AGENT_PRODUCT_DETAIL(props.id).then((res) => {
        if (!res.code && res.data) {
          data.datas = res.data.agentProduct
        } else {
          currentInstance.proxy.customMessage({
            type: 'error',
            message: res.msg,
          })
        }
      })
    })

    return {
      ...toRefs(data),

      contractClick,
    }
  },
})
</script>

<style scoped>
</style>
